<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>StoreAdmin | UserList</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="../lte/css/AdminLTE.min.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="hold-transition bg-gray">

<div class="content">

	<div class="box box-primary">
		<div class="box-header with-border">用户列表</div>
		<!-- /.box-header -->
		<div class="box-body">

			<!-- 搜索栏 -->
			<form class="form-inline" method="post">
				<div class="form-group">
					<span>帐号：</span>
					<input type="text" name="username" class="form-control">
				</div>
				<div class="form-group">
					<span>邮箱：</span>
					<input type="email" name="email" class="form-control">
				</div>
				<div class="form-group">
					<span>手机：</span>
					<input type="text" name="phone" class="form-control">
				</div>
				<div class="form-group">
					<span>状态：</span>
					<select name="status" class="form-control">
						<option value="-1">- 请选择 -</option>
						<option value="1">激活</option>
						<option value="0">冻结</option>
					</select>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-default"><i class="fa fa-search"></i> 查询</button>
					<button type="reset" class="btn btn-default"><i class="fa fa-repeat"></i> 重置</button>
				</div>
			</form>

			<!-- 工具栏 -->
			<div id="toolbar">
				<a class="btn btn-default" href="user-form.html"><i class="fa fa-plus"></i> 添加</a>
				<button class="btn btn-default" title="修改"><i class="fa fa-pencil"></i> 修改</button>
				<button class="btn btn-default" title="激活"><i class="fa fa-check"></i> 激活</button>
				<button class="btn btn-default" title="冻结"><i class="fa fa-ban"></i> 冻结</button>
				<button class="btn btn-default" title="删除"><i class="fa fa-trash"></i> 删除</button>
				<button class="btn btn-default" title="导出"><i class="fa fa-file-excel-o"></i> 导出</button>
			</div>

			<!-- 表格数据 -->
			<table id="table"></table>

		</div>
		<!-- /.box-body -->
	</div>
	<!-- /.box -->

</div>

<!-- REQUIRED JS SCRIPTS -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../lte/js/adminlte.min.js"></script>
<!-- Bootstrap Table -->
<script src="../plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
	$(function () {

		$("#table").bootstrapTable({
			//sidePagination: "server",
			//url: "/examples/bootstrap_table/data",
			//responseHandler: function(res) {return res},
			//queryParams: function(params) {return params},
			toolbar: "#toolbar",
			showRefresh: true,
			pagination: true,
			pageSize: 5,
			idField: "id",
			columns: [
				{field: "ck", checkbox: true},
				{field: "username", title: "帐号"},
				{field: "email", title: "邮箱"},
				{field: "phone", title: "手机"},
				{field: "gender", title: "性别", formatter: genderFormatter},
				{field: "status", title: "状态", formatter: statusFormatter},
				{field: "operate", title: "操作", width: "120px", formatter: operateFormatter}
			],
			data: [
				{id: 1, username: "caocao", email: "caocao@abc.com", phone: "15578894732", gender: 0, status: 1},
				{id: 2, username: "liubei", email: "liubei@abc.com", phone: "15578894732", gender: 0, status: 1},
				{id: 3, username: "guanyu", email: "guanyu@abc.com", phone: "15578894732", gender: 0, status: 1},
				{id: 4, username: "zhangfei", email: "zhangfei@abc.com", phone: "15578894732", gender: 0, status: 0},
				{id: 5, username: "diaochan", email: "diaochan@abc.com", phone: "15578894732", gender: 1, status: 1},
				{id: 5, username: "daqiao", email: "daqiao@abc.com", phone: "15578894732", gender: 1, status: 1},
				{id: 5, username: "xiaoqiao", email: "xiaoqiao@abc.com", phone: "15578894732", gender: 1, status: 1}
			]
		});

		function genderFormatter(value) {
			return value === 1 ? "男" : "女";
		}

		function statusFormatter(value) {
			if (value === 1) {
				return '<span class="label label-info">激活</span>';
			} else {
				return '<span class="label label-default">冻结</span>';
			}
		}

		function operateFormatter() {
			return [
				'<button class="btn btn-primary btn-xs" title="查看"><i class="fa fa-search-plus"></i></button> ',
				'<button class="btn btn-success btn-xs" title="修改"><i class="fa fa-pencil"></i></button> ',
				'<button class="btn btn-danger btn-xs" title="删除"><i class="fa fa-trash"></i></button>'
			].join('');
		}

	});
</script>

</body>
</html>